<template>
  <c-loading :loading="false">
    <view class="container team">
      <view>
        <view class="card flex al-center" v-for="item in list" :key="item.userId">
          <c-img class="avatar"  default-src="/assets/imgs/default/avatar.png"  :src="item.avatarUrl" />
          <view class="name">{{ item.nickName }}</view>
          <view class="tag" :style="`background:${getLevelColor(item.level)}`">{{ item.levelName }}</view>
          <view class="grow"></view>
          <view class="date">{{ item.inviteIime ?? item.createTime }}</view>
        </view>
      </view>
      <c-pager v-bind="pager"></c-pager>
    </view>
  </c-loading>
</template>
<script setup>
import { CImg, CLoading, CPager } from '@/components';
import { usePager } from '@/hooks';
import { View } from '@tarojs/components';
import api from '@/api';

const { list, pager } = usePager({
  handler: (skip, take) =>
    api.user.userTeamList({
      skip,
      take
    })
});
const getLevelColor = level => {
  switch (level) {
    case 0:
      return 'var(--color-gray)';
    case 1:
      return 'var(--color-info)';
    case 2:
      return '#cb9d55';
    default:
      return 'rgba(0,0,0,.8)';
  }
};
</script>
<style lang="scss">
.team.container {
  padding-top: 20px;
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
  }
  .name {
    font-size: 26px;
    margin-right: 10px;
  }
  .tag {
    display: inline-block;
    line-height: 2em;
    height: 2em;
    font-size: 20px;
    padding: 0 18px;
    color: var(--color-caption);
    font-weight: bold;
    margin-left: 10px;
    border-radius: 10px;
  }
  .date {
    color: var(--color-gray);
    font-size: 24px;
  }
}
</style>
